<template>
  <div class="gap">
    <h2>增加保险产品</h2>
    <el-form
      :model="product.value"
      status-icon
      ref="product"
      label-width="70px"
      class="demo-product"
    >
      <el-form-item label="名字">
        <el-input type="text" v-model="product.productName" max="250px"></el-input>
      </el-form-item>

       <el-form-item label="价格">
        <el-input type="text" v-model="product.price" max="250px"></el-input>
      </el-form-item>

       <el-form-item label="详情">
        <el-input type="text" v-model="product.detail" max="250px"></el-input>
      </el-form-item>
      
       <el-form-item label="状态">
        <el-input type="text" v-model="product.state" max="250px"></el-input>
      </el-form-item>

       <el-form-item label="年限">
        <el-input type="text" v-model="product.limittime" max="250px"></el-input>
      </el-form-item>

      <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/images/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="product.imgname" :src="'http://localhost:3000/temp/'+product.imgname" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      <el-form-item label="种类">
        <Category @choose="choose"></Category>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="addproduct1">增加保险产品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import Category from "../productcategory/Cascader.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("products");
// const {
//   mapState: mapState1,
//   mapActions: mapActions1,
// } = createNamespacedHelpers("productcategory");

export default {
  components: {
    Category,
  },
  data() {
    return {
      value: "",
      product: {
        productName: "",
        price:"",
        detail:"",
        state:"",
        limittime:"",
        imgname:"",
      },
       //图片
       imageUrl: ''
    };
  },
  computed: {
    ...mapState(["pageData"]),
    // ...mapState1(["pageData"]),
    // 
  },
  watch: {
    
  },
  methods: {
    ...mapActions(["addproduct"]),
    async addproduct1() {
      const data = await this.addproduct({...this.product,categoryId: this.value});
      console.log(data);
      if (data.status) {
        this.$router.push("/system/productlist");
      }
    },
    choose(val) {
      this.value = val;
      console.log(this.value);
    },
     //图片
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      if(res.status){
         this.product.imgname = res.filename;
         console.log(this.product.imgname);
      }
       
      },
      beforeAvatarUpload(file) {
        console.log(file);
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
}
</script>

<style lang="scss">
  h2{
    line-height: 60px;
  }
  .form {
  width: 290px;
  margin: 0px auto;
}
.el-input__inner {
  width: 250px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>